<template>
  <div class="login">
     <div class="logo">
        <img />
     </div>
      <div class="cont">
         <div><input type="text" maxlength="13" placeholder="手机号"  v-model="phone"/>
               <button @click="getMsg(phone)">获取验证码</button>
         </div>
         <div><input type="text" placeholder="验证码"></div>
      </div>
  </div>
</template>

<script>
import {getCode} from "@/api"
export default {
   data(){
      return {
         cid:'',
         phone:'',
         flag:false
      }
   },
   created(){
      this.cid = this.$route.query.cid
      console.log(this.cid)
   },
   methods:{
      getMsg(phone){
         console.log(111)
         if(!this.flag) return;
         getCode(phone).then(res=>{
            console.log(res)
         })
      }
   }
}
</script>

<style>
.login{
   width:90%;
   height:4rem;
   margin:2rem auto;
   border:1px solid;
   display: flex;
   flex-direction: column;
   align-items: center;
}
.login .logo{
   width:1rem;
   height:1rem;
   background:pink;
   border-radius: 0.5rem;
   margin-bottom: 0.2rem;
}
.login .cont div{
   width:100%;
   height:1rem;
   /* border:1px solid; */
   display: flex;
}
.login .cont div input{
   outline: none;
   border:none;
}
.login .cont div button{
   border:none;
   background:white;
   outline: none;

}  
</style>